In this step of the tutorial you learn how to use keyboard keys to scroll in those application components which support scrolling.
Set keyboard keys to scroll the list box in the Car application screen
In this section you use the trySetFocus() scripting function to set focus to the Car Grid List Box node. When you set focus to that node, you can scroll the list items in the Car application screen.
To set keyboard keys to scroll the list box in the Car application screen:
In the Project > RootPage select the Car node and in the Node Components add to the Page Activated trigger an Execute Script action. You use this trigger to execute a script which sets focus to the Car Grid List Box when the Page node Car is activated. When a Grid List Box node has focus, you can use:
The ↑ (Up Arrow) and ↓ (Down Arrow) keys scroll the list items in a vertical list box.
The → (Right Arrow) and ← (Left Arrow) keys scroll the list items in a horizontal list box.
The Home key selects the first list item.
The End key selects the last list item.
The Page Up and Page Down keys go to the beginning and end of a page.
Create a script and in the Script Editor use this script:
// Get the Car Grid List Box node.
var carGridListBox = node.lookupNode('#Car Grid List Box');
// Set focus to the Car Grid List Box node.
carGridListBox.trySetFocus();
You use this script to set focus to the Car Grid List Box node when the Page node Car is activated. When you use the ← (Left Arrow) or → (Right Arrow) keys to navigate to the Car application screen, you can use the ↑ (Up Arrow) and ↓ (Down Arrow) keys to scroll the selection of list items in the Car Grid List Box.
In the Project > RootPage > Car select the Car Grid List Box node and in the Node Components add the Key Down trigger. You use this trigger to execute the NavigateRight.js script which you created in the first step of this tutorial. Because the Car Grid List Box node has focus when the Page node Car is active, the → (Right Arrow) and ← (Left Arrow) keys on the keyboard receive input only when another Page is activated.
In the Trigger Settings for that trigger click Add condition, and in the Trigger Condition Editor set:
Value A
Value From to Message
Operator to =
Value B
Value From to Fixed
Fixed Value to 64.
In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.
You set the trigger to be set off when the user presses the → (Right Arrow) key.
Add to the Key Down trigger an Execute Script action and use the NavigateRight.js script. You set the application to execute the NavigateRight.js script when the trigger is set off.
Add another trigger for the Key Down, in the Execute Script action use the NavigateLeft.js script, and set it to be set off when the user presses the ← (Left Arrow) key.
In the Preview when you use the → (Right Arrow) or ← (Left Arrow) keys to navigate to the Page node Car, use:
The ↑ (Up Arrow) and ↓ (Down Arrow) keys scroll the selection of list items.
The Home and Page Up keys select the first list item.
The End and Page Down keys select the last list item.
Set keyboard keys to scroll the list box in the Navigation screen
In this section you use the trySetFocus() scripting function to set focus to the Navigation Grid List Box node. When you set focus to that node, you can scroll the list items on the Navigation application screen.
To set keyboard keys to scroll the list on the Navigation application screen:
In the Project > RootPage select the Page Host node Navigation node and in the Node Components add to the Page Activated trigger an Execute Script action. You use this trigger to execute a script which sets focus to the Navigation Grid List Box when the Page Host node Navigation is activated.
Create a script and in the Script Editor use this script:
// When the Page node Navigation is activated, set focus to the Grid List Box 2D node to enable scrolling.
var navigationGridListBox = node.lookupNode('#Navigation Grid List Box');
navigationGridListBox.trySetFocus();
You use this script to set focus to the Navigation Grid List Box node when the Page Host node Navigation is activated. When you use the ← (Left Arrow) or → (Right Arrow) keys to navigate to the Navigation application screen, you can use the ↑ (Up Arrow) and ↓ (Down Arrow) keys to scroll the selection of list items in the Navigation Grid List Box.
In the Project select the Car Grid List Box node and in the Node Components copy the Key Down trigger.
In the Project > RootPage > Navigation > Grid Layout 2D select the Navigation Grid List Box node and in the Node Components paste the Key Down trigger.
In the Preview when you use the → (Right Arrow) or ← (Left Arrow) keys to navigate to the Page node Car, use the ↑ (Up Arrow) and ↓ (Down Arrow) keys to scroll the selection of list items. The Home and Page Up keys select the first list item and the End and Page Down keys select the last list item.
Set keyboard keys to scroll the Map application screen
In this section you use the trySetFocus() scripting function to set focus to the Scroll View 2D node. When you set focus to that node, you can scroll the map on the Map application screen using keyboard keys.
To set keyboard keys to scroll the Map application screen:
In the Project > RootPage > Navigation select the Map node and in the Node Components add to the Page Activated trigger an Execute Script action. You use this trigger to execute a script which sets focus to the Scroll View 2D node when the Page node Map is activated. When a Scroll View node has focus, you can use the arrow keys on the keyboard to scroll the contents of that node.
Create a script and in the Script Editor use this script:
// Get the Scroll View 2D node.
var scrollView = node.lookupNode('#Scroll View 2D');
// Set focus to the Scroll View 2D node.
scrollView.trySetFocus();
You use this script to set focus to the Scroll View 2D node when the Page node Map is activated. When you navigate to the Map application screen, you can use the arrow keys on the keyboard to scroll the map.
Set a key to open the Map application screen
In this section you set the Map application screen window to open when the user presses the Enter key on the keyboard.
To set a key to open the Map application screen:
In the Project > RootPage > Navigation > Grid Layout 2D select the Navigation Grid List Box node and in the Node Components click Add new trigger for Key Down.
In the Trigger Settings Editor for the Key Down trigger you created in the previous step add these conditions:
A condition which sets off the trigger only when the Page Host node Navigation node is active. In the Trigger Condition Editor set:
Value A
Value From to Property
Item to Screens/Screen/RootPage/Navigation
Property to Activation State
Operator to =
Value B
Value From to Fixed
Enable the Fixed Value checkbox.
In the Trigger Condition Editor click Save.
A condition which sets off the trigger when the user presses the Enter key on their keyboard. In the Trigger Condition Editor set:
Value A
Value From to Message
Operator to =
Value B
Value From to Fixed
Fixed Value to 43
In the Trigger Condition Editor and the Trigger Settings Editor windows click Save.
In the Project > Navigation > Grid Layout 2D select the OpenMap node, in the Node Components copy and paste each action from the Button: Click trigger to the Key Down trigger you added for the Navigation Grid List Box node in the previous step.
Set a key to close the Map application screen
In this section you set the Map window to close when the user presses the E key.
To set a key to close the Map application screen:
In the Project > RootPage > Navigation > Map select the Scroll View 2D node and in the Node Components add the Key Down trigger. You use this trigger to close the Map when the user presses a key on the keyboard.
Add to the Key Down trigger a condition which sets the trigger off when the user presses the E key.
Add to the Key Down trigger the actions you use to close the Map page:
An Execute Script action, select the OnNavigationActivated.js script, and click Save. You set the focus back to the Navigation Grid List Box node to allow the user to scroll the list items when the Map page closes.
A Navigate to Page action, set the Item to Screens/Screen/RootPage/Navigation, and click Save. You set the application to navigate back to the Navigation application screen.
In the Preview use the E key to close the Map application screen.
Finalize the keyboard navigation
In this section you finalize the keyboard navigation to make sure that the key input works together with the pointer input. Because you set the focus using Key Down triggers, which the user sets off by pressing a key on the keyboard, using the pointer does not set the focus in the correct place. If you use the keyboard to navigate to a Page node which gets focus, and then use the pointer to close that application screen, the focus remains on that Page node.
To finalize the keyboard navigation:
In the Project > RootPage select the Page Host node Home, in the Node Components add to the Page Activated trigger an Execute Script action, and use the SetFocusToScreen.js script. You set focus to the Home node when that node is activated. When you use the keyboard keys to navigate in a part of the application which has focus and use the pointer to navigate to the Page Host node Home, the Home node gets the focus.
Repeat the previous step for the Page node Media.
In the Project > Prefabs > Air Condition Navigation select the Button 2D node Close, in the Node Components add to the Button: Click trigger an Execute Script action, and use the SetFocusToScreen.js script. You set the Button: Click trigger in the Close button to set off a script which sets focus to the Screen. When you navigate in the AirCondition window and use the pointer to close that window, the Home node gets the focus.
In the Project > RootPage > Navigation > Map select the Button 2D node CloseMap and repeat the previous step for that node. You set the Button: Click trigger in the CloseMap button to execute a script which sets focus to the Screen.
Organize the script files in your Kanzi Studio project
In this section you rename the scripts you created in this step of the tutorial and create folders for those scripts.
To organize the script files in your Kanzi Studio project:
In the Library > Resource Files > Scripts rename:
Script.js to OnCarActivated.js
Script_1.js to OnNavigationActivated.js
Script_2.js to OnMapActivated.js
In the Library > Resource Files > Scripts:
Create folder Car and drag the OnCarActivated.js script to that folder.
Create folder Navigation and drag the OnNavigationActivated.js script to that folder.
Create folder Map and drag the OnMapActivated.js script to that folder.
In the Preview you can now use both the keyboard keys you have defined in this tutorial and your pointer to navigate the application.
Use these keyboard keys to navigate the application:
→ (Right Arrow) and ← (Left Arrow) keys to navigate between the application screens.
In the Home screen use:
→ (Right Arrow) and ← (Left Arrow) keys to navigate between the Recent and Favorite screens.
↑ (Up Arrow) key to:
Set focus to the button which navigates to the AirCondition screen.
If the button has focus, navigate to the Recent or Favorite screen based on which of those screens is active.
↓ (Down Arrow) key to:
Set focus to the button which navigates to the AirCondition screen.
If the button has focus, set focus to the Screen node to use the navigation bar.
Enter key to navigate to the AirCondition screen when the button has focus.
In the AirCondition screen use:
→ (Right Arrow) and ← (Left Arrow) keys to:
Navigate between the Driver and Passenger screens.
Set slider values.
↑ (Up Arrow) key to set focus to the slider.
↓ (Down Arrow) key to set focus to the Driver or Passenger screen.
E key to close the AirCondition screen.
In the Car screen use:
↑ (Up Arrow) and ↓ (Down Arrow) keys to scroll the list box items.
In the Navigation screen use:
↑ (Up Arrow) and ↓ (Down Arrow) keys to scroll the list box items.
Enter key to navigate to the Map screen.
In the Map screen use:
→ (Right Arrow), ← (Left Arrow), ↑ (Up Arrow), and ↓ (Down Arrow) keys to scroll the map.
